<script setup lang="ts">
import {computed, reactive, ref} from 'vue'
import {Bottom, Search} from '@element-plus/icons-vue'
import {useSettingsStore} from "@/store/modules/settings";
import Draggable from 'vuedraggable'
import AppDateBox from './components/AppDateBox.vue'
import {debounce} from 'lodash';
import EsDialog from '@/components/es-dialog/index.vue'
import UserSettings from "./components/UserSettings.vue";


const input = ref('')
const select = ref('')
//配置信息
const settingsStore = useSettingsStore();
const baseConfig = computed(() => settingsStore.baseConfig);
const navConfig = computed(() => settingsStore.navConfig);

const state = reactive({
  selectGroupId: navConfig.value[0].id,
  dialogVisible: false,
});
/**
 * 切换菜单项目
 * @param id
 */
const selectGroupItem = (id: string) => {
  state.selectGroupId = id;
  console.log(id)
}

/**
 * 滑动切换菜单
 */
const handleScroll = debounce((event) => {
  // debugger
  const currentScrollTop = event.deltaY;

// 找到目标元素的索引
  const targetIndex = navConfig.value.findIndex(item => item.id === state.selectGroupId);
  if (currentScrollTop > 0) {
    // 向下滚动
    console.log('向下滚动');
    // 获取下一个元素的 id
    state.selectGroupId = targetIndex < navConfig.value.length - 1 ? navConfig.value[targetIndex + 1].id
        : navConfig.value[0].id;
  } else if (currentScrollTop < 0) {
    // 向上滚动
    console.log('向上滚动');
    // 获取上一个元素的 id
    state.selectGroupId = targetIndex > 0 ? navConfig.value[targetIndex - 1].id : navConfig.value[navConfig.value.length - 1].id;
  }
}, 40);


</script>

<template>
  <div class="app-wrapper">
    <div class="background">
      <img v-if="baseConfig.wallpaper.type ==1"
           :src="baseConfig.wallpaper.src"
           alt=""/>
      <video autoplay loop muted v-else>
        <source src="/src/assets/bg/64.mp4" type="video/mp4"/>
<!--        <source :src="baseConfig.wallpaper.src" type="video/mp4"/>-->
      </video>
    </div>
    <div class="front" @wheel.prevent="handleScroll">
      <div :class="{
        'app-sidebar': true,
        'is-left': baseConfig.sidebar.placement =='left',
        'is-right': baseConfig.sidebar.placement =='right',
      }"
           :style="{
        'background-color': `rgba(38, 64, 85 , var(${baseConfig.sidebar.opacity}, .4))`
        }"
      >
        <!--    用户    -->
        <div class="app-sidebar-avatar">
          <span>
          <img class="object-cover rounded-full h-[30px] w-[30px]"
               src="https://files.codelife.cc/blog/avatar/default-avatar.png?x-oss-process=image/resize,limit_0,m_fill,w_40,h_40/quality,q_92/format,webp">
          </span>
        </div>
        <!--   菜单     -->
        <div class="app-sidebar-group d-scrollbar-hide">
          <ul class="app-sidebar-ul">
            <li class="app-group-item" :class="{'active':item.id == state.selectGroupId }" draggable="false"
                v-for="item in navConfig" @click="selectGroupItem(item.id)">
              <div class="" :title="item.name" :id="item.id">
                <div style="display:block;">
                  <el-icon class="d-icon f22" style="position: relative">
                    <component :is="'House'"/>
                  </el-icon>
                </div>
                <span class="d-elip app-group-item-title">{{ item.name }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!--  日期组件    -->
      <AppDateBox/>
      <!--   搜索   -->
      <div id="app-serach-wrap" class="w-full">
        <div class="app-serach-box relative">
          <div class="mt-4">
            <el-input
                v-model="input"
                placeholder=""
                class="input-with-select"
            >
              <template #prepend>
                <el-select v-model="baseConfig.useSearch" style="width: 100px">
                  <el-option v-for="item in baseConfig.searchEngine" :label="item.title" :value="item.key"/>
                </el-select>
              </template>
              <template #append>
                <el-button :icon="Search"/>
              </template>
            </el-input>
          </div>
        </div>
      </div>
      <!--   卡片   -->
      <div class="app-icon-grid-wrap" style=" " :style="{
          '--icon-max-width':baseConfig.icon.width+baseConfig.icon.unit,
          'width': 'var(--icon-max-width)',
          'max-width': 'var(--icon-max-width, 1150px)',
      }">

        <div class="app-icon-item" :class="{
          'app-icon-item-active':menu.id == state.selectGroupId
        }" v-for="menu in navConfig">
          <Draggable class="drag_box" v-model="menu.children" group="people" item-key="id">
            <template #item="{ element }">

              <div :class="'drag_item  drag_item_'+element.id +' icon-size-'+(element.size||'1x1')">
                <!--模块-->
                <div class="app-item-icon">
                  <dev v-if="element.type =='component'" class="component-div"
                       style="text-align: center;width: 100% ;display: inline-block;height:100%;
                     background-color: #0dcaf0"
                       :style="{
                           'border-radius': baseConfig.icon.iconRadius+'px'}">
                    我是模块

                  </dev>
                <!--网站-->
                  <div v-else class="app-item-icon" :title="element.name">
                    <img class="app-item-img"
                         :src="element.src"
                         :style="{
                           'background-color': element.backgroundColor,
                           'border-radius': baseConfig.icon.iconRadius+'px'
                         }">
                  </div>
                  <p class="app-item-title d-elip">{{ element.name }}</p>
                </div>
              </div>
            </template>
          </Draggable>
          <el-button @click="state.dialogVisible =!state.dialogVisible">test</el-button>
        </div>
      </div>

    </div>

  </div>
<!--  <EsDialog v-model="state.dialogVisible" :close-on-click-modal="true" title="test">-->
<!--    test-->
<!--  </EsDialog>-->

  <UserSettings v-model="state.dialogVisible" />

</template>

<style lang="less" scoped>
.background {
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  z-index: -1;
  position: absolute;
}

.background video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.is-right {
  right: 0 !important;
}

.is-left {
  left: 0 !important;
}

.front {
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;

  .app-sidebar {
    z-index: 2;
    width: 100px;
    height: 100%;
    //background-color: #ffffff;
    //opacity: 0.3;
    position: absolute;
    //left: 0;
    backdrop-filter: blur(6px);

    color-scheme: none !important;
    text-align: center;
    color: rgba(233, 233, 233, 0.6);

    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    font: inherit;
    vertical-align: baseline;

    .app-sidebar-avatar {
      margin-top: 40px;
      margin-bottom: 40px;
      cursor: pointer;
    }

    .app-sidebar-group {
      list-style: none;
      cursor: pointer;

      .app-sidebar-ul {
        padding: 0 !important;;
      }

      .app-group-item {
        list-style: none;
        -webkit-user-drag: none;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        margin-bottom: 10px !important;
        transition: background .3s;

        .d-icon {

          position: absolute;
          color-scheme: none !important;
          list-style: none;
          box-sizing: border-box;
          margin: 0;
          padding: 0;
          border: 0;
          font: inherit;
          vertical-align: baseline;
          --color: inherit;
          height: 1em;
          width: 1em;
          line-height: 1em;
          //display: inline-flex;
          display: inline !important;
          justify-content: center;
          align-items: center;
          fill: currentColor;
          color: var(--color);
          font-size: 22px;
          transition: transform .2s;
        }
      }

      .active {
        background-color: #ffffff26;
      }
    }
  }
}

.app-serach-box {
  width: 500px;
  margin: 20px auto;
}
#app-serach-wrap{
  margin-bottom: 40px;
}

.app-icon-grid-wrap {
  box-sizing: border-box;
  //width: 1300px;
  margin: 10px auto;
  padding: 0 100px;
}

.drag_box {
  --icon-name: block;
  --icon-size: 44px;
  --icon-nameColor: #fff;
  --icon-nameSize: 12;
  --icon-gap-x: 30px;
  --icon-gap-y: 30px;
  --icon-radius: 16px;

  //width: 100%;
  padding: 0 10px;
  pointer-events: auto;
  vertical-align: baseline;
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--icon-size)) !important;
  grid-template-rows: repeat(auto-fill, var(--icon-size)) !important;
  grid-auto-flow: dense !important;
  grid-gap: var(--icon-gap-x) var(--icon-gap-y);
  box-sizing: border-box;
  justify-content: center;

  .app-item-title {
    color-scheme: none !important;
    pointer-events: auto;
    list-style: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: calc(100% + var(--icon-gap-y)) !important;
    margin-left: calc(var(--icon-gap-y) / 2 * -1);
    display: var(--icon-name);
    margin-top: 6px;
    text-align: center;
    color: var(--icon-nameColor);
    font-size: var(--icon-nameSize);
    line-height: 1.1;
    filter: drop-shadow(0px 2px 7px rgba(0, 0, 0, .8));
  }

  .app-item-icon, .app-item-img {
    width: 100%;
    height: 100%;
  }

  .icon-size-1x1 {
    width: var(--icon-size) !important;
    height: var(--icon-size) !important;
    //margin: var();
    grid-column: span 1;
    grid-row: span 1;

  }

  .icon-size-1x2 {
    width: var(--icon-size) !important;
    height: calc(var(--icon-size) * 2 + var(--icon-gap-y)) !important;
    grid-column: span 1;
    grid-row: span 2;
  }

  .icon-size-2x1 {
    width: calc(var(--icon-size) * 2 + var(--icon-gap-x)) !important;
    height: var(--icon-size) !important;
    grid-row: span 1 !important;
    grid-column: span 2;

  }

  .icon-size-2x2 {
    grid-column: span 2;
    grid-row: span 2;
    width: calc(var(--icon-size) * 2 + var(--icon-gap-y)) !important;
    height: calc(var(--icon-size) * 2 + var(--icon-gap-x)) !important;
  }

  .icon-size-2x4 {
    grid-row: span 2;
    grid-column: span 4;
    width: calc(var(--icon-size) * 4 + var(--icon-gap-y) * 3) !important;
    height: calc(var(--icon-size) * 2 + var(--icon-gap-x)) !important;
  }
}

.drag_item {
  //border: 2px solid salmon;
  //padding: 5px;
  //color-scheme: none !important;
  //pointer-events: auto;
  //list-style: none;
  font: inherit;
  vertical-align: baseline;
  transition-duration: .3s;
  position: relative;
  -webkit-user-select: none;
  box-sizing: border-box;
  opacity: 1;
}

.app-icon-item {
  display: none;
}

.app-icon-item-active {
  display: block !important;
}

.el-menu-vertical-demo {
  width: 50px;
  height: 50px;
}
</style>
